<template>
  <mobile-layout class="index-demo-wrapper">
    <Header title="的是" :fixed="true" :fadeOut="true"></Header>
    <mt-navbar v-model="tabSelected">
      <mt-tab-item id="tabA">
        菜单A <i class="icon setup"></i>
      </mt-tab-item>
      <mt-tab-item id="tabB">
        菜单B <i class="icon eclat2"></i>
      </mt-tab-item>
      <mt-tab-item id="tabC">
        菜单C
      </mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="tabSelected">
      <mt-tab-container-item id="tabA">
        Hello, World!
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p style="height: 100">sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
        <p>sdasdf</p>
      </mt-tab-container-item>
      <mt-tab-container-item id="tabB">
        I am V2S!
      </mt-tab-container-item>
      <mt-tab-container-item id="tabC">
        Bye Bye!
      </mt-tab-container-item>
    </mt-tab-container>

    <div slot="footer">
      <mt-tabbar v-model="tabSelected">
        <mt-tab-item id="tabA">
          <img slot="icon" src="../../images/icons/1.png">
          tab1
        </mt-tab-item>
        <mt-tab-item id="tabB">
          <img slot="icon" src="../../images/icons/2.png">
          tab2
        </mt-tab-item>
        <mt-tab-item id="tabC">
          <img slot="icon" src="../../images/icons/3.png">
          tab3
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </mobile-layout>
</template>
<script>
  import appConfig from 'config'
  import Header from 'components/Header'
  export default {
    name: 'indexHome',
    data() {
      return {
        title: appConfig.appName,
        tabSelected: 'tabA'
      }
    },
    components: {
      Header: Header
    },
    methods: {
      back() {
        this.$router.back()
      },
      scroll(dir, scrollTop) {
        console.log(dir, scrollTop)
      },
    }
  }
</script>
<style lang="postcss" scoped>
  .index-demo-wrapper {
    text-align: center;
    line-height: 5;
  }
</style>
